<template>
  <div class="app-container">
    <div class="filter-container"/>
    <div class="filter-container">

    </div>

    <el-card class="box-card">

      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane
          label="待处理请求"
          name="first"
        >
          <div class="app-container">

            <el-table
              :key="key"
              :data="tableData1"
              border
              fit
              highlight-current-row
              style="width: 100%"
            >
              <!-- <el-table-column
              label="序号"
              prop="id"
              align="center"
              width="50"
            >
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column> -->

              <el-table-column
                prop="driverName"
                label="司机姓名"
                align="center"
                width=""
              />
              <el-table-column
                prop="driverPhone"
                label="司机电话"
                align="center"
                width=""
              />
              <el-table-column
                label="油卡类型"
                width=""
                align="center"
              >
                <template slot-scope="scope">
                  {{ scope.row.typeId | typeFilter1 }}
                </template>
              </el-table-column>
              <el-table-column
                prop="oilCardNum"
                label="卡号"
                align="center"
                width=""
              />
              <el-table-column
                prop="created"
                label="申请时间"
                align="center"
                width=""
              />
              <el-table-column
                prop="cashMoney"
                label="充值金额"
                align="center"
                width=""
              />
              <el-table-column
                prop="payMoney"
                label="用户支付金额"
                align="center"
                width=""
              />

              <el-table-column
                label="操作"
                align="center"
                width=""
                class-name="small-padding fixed-width"
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    size="mini"
                    style="width:80px"
                    @click="handleCreate(scope.row)"
                  >充值
                  </el-button>

                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="listQuery.page"
              :limit.sync="listQuery.limit"
              @pagination="getList"
            />
          </div>


        </el-tab-pane>
        <el-tab-pane
          label="已处理请求"
          name="second"
        >

          <rechargeCard2></rechargeCard2>

        </el-tab-pane>

      </el-tabs>
    </el-card>


    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      top="2vh"
      width="550px"
    >
      <el-form
        ref="temp"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="120px"
        style="width: 400px; margin-left:50px;"
      >
        <el-form-item
          label="主卡卡号"
          prop="masterCardNum"
        >
          <el-input v-model="temp.masterCardNum" disabled/>
        </el-form-item>
        <el-form-item
          label="主卡未分配金额"
          prop=""
        >
          <el-input v-model="temp.money" disabled/>
        </el-form-item>

        <el-form-item
          label="子卡卡号"
          prop="oilCardNum"
        >
          <el-input v-model="temp.oilCardNum" disabled/>
        </el-form-item>

        <el-form-item
          label="充值金额"
          prop="cashMoney"
        >
          <el-input v-model="temp.cashMoney" disabled/>
        </el-form-item>

        <el-form-item
          label="实际支付金额"
          prop="payMoney"
        >
          <el-input v-model="temp.payMoney" disabled/>
        </el-form-item>

      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormVisible = false">
          {{ $t('table.cancel') }}
        </el-button>
        <el-button
          type="primary"
          @click="dialogStatus==='create'?createData():updateData()"
        >
          {{ $t('table.confirm') }}
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
  import {
    addBankCard,
    bankCardList,
    getPhoneCode,
    agentGetMoney,
    unBindBankCard,
    transferWallet,
    getSupplyAll,
    getallAgent,
    walletTradeList,
    getAllOilRechargeByPage,
    subCardRech
  } from "@/api/v1";
  import {getInfo, resetOwnerPassword, resetAgentPassword} from "@/api/user";

  import rechargeCard2 from "@/components/rechargeCard2";
  import waves from "@/directive/waves"; // Waves directive
  import Pagination from "@/components/Pagination"; // Secondary package based on el-paginationry package based on el-pagination
  import {parseTime} from "@/utils";
  import {MessageBox, Message} from "element-ui";

  export default {
    directives: {waves},
    components: {Pagination, rechargeCard2},
    filters: {
      typeFilter1(role) {
        switch (role) {
          case 1:
            return "中石油";
          case 2:
            return "中石化";
        }
      },
      typeFilter2(role) {
        switch (role) {
          case 1:
            return "上门自取";
          case 2:
            return "快递";
        }
      }
    },
    data() {
      return {
        total: 0,
        tableData1: [],
        tableData2: [],

        dialogStatus: "",
        textMap: {
          update: "编辑",
          create: "新增"
        },
        transBtn: false,
        allAgent: [],
        walletDate: [],
        supply: [],
        activeName: "first",
        name: "",
        phone: "",
        currentMoney: "",
        listQuery: {
          page: 1,
          limit: 20,
          sort: "+id",
          relationId: "",
          relationType: ""
        },
        key: 1, // table key
        walletkey: 1, // table key
        dialogFormVisible: false,
        dialogFormMoney: false,
        dialogFormMoneyTX: false,
        ruleForm: {
          oldPassword: "",
          newPassword: "",
          newPassword2: ""
        },
        payForm: {
          oldPassword: "",
          newPassword: "",
          newPassword2: ""
        },
        info: {},
        rules: {
          oldPassword: [
            {required: true, message: "请输入当前密码", trigger: "blur"}
          ],
          newPassword: [
            {required: true, message: "请输入新密码", trigger: "blur"}
          ],
          newPassword2: [
            {required: true, message: "请再次输入新密码", trigger: "blur"}
          ],
          oilSupplyId: [
            {required: true, message: "请选择您要转帐的商户", trigger: "change"}
          ],
          password: [{required: true, message: "请输入密码", trigger: "blur"}],
          money: [{required: true, message: "请输入金额", trigger: "blur"}]
        },
        temp: {
          id: "",

        },
        isAgentSub: false
      };
    },
    watch: {
      checkboxVal(valArr) {
        this.formThead = this.formTheadOptions.filter(
          i => valArr.indexOf(i) >= 0
        );
        this.key = this.key + 1; // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
        this.walletkey = this.walletkey + 1; // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
      }
    },

    created() {
      this.getList();
    },
    methods: {
      handleGetMoney(row) {
        this.temp2 = Object.assign({}, row); // copy obj
        console.log(row);
        console.log(this.temp);
        this.dialogFormMoneyTX = true;
        this.$nextTick(() => {
          this.$refs["temp"].clearValidate();
        });
      },
      getList() {
        this.listLoading = true;
        var data = {
          state: 0
        };
        getAllOilRechargeByPage(data).then(res => {
          this.tableData1 = res.data.records;
          this.total = Number(res.data.total);
          console.log(this.tableData);
        });
      },


      resetTemp(){
        this.temp = {}

      },

      handleCreate(row) {
        this.resetTemp();
        this.temp = row;
        console.log(this.temp);
        this.dialogStatus = "create";
        this.dialogFormVisible = true;
        this.$nextTick(() => {
          this.$refs["temp"].clearValidate();
        });
      },


      createData() {
        this.$refs["temp"].validate(valid => {
          if (valid) {
            subCardRech(this.temp).then(res => {
              this.dialogFormVisible = false;
              console.log(res);
              this.$notify({
                title: "消息",
                message: res.msg,
                type: "success",
                duration: 2000
              });
              this.getList();
            });
          }
        });
      },
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>
<style>
  .el-row {
    margin: 20px;
  }
</style>

